<template>
  <div class="flex-1 h-full card_class">
    <div class="card_title">
      <span>{{ title }}</span>
      <div v-if="!isDarkMode(routeName)">
        <el-select
          v-model="searchParam.year"
          placeholder="请选择"
          filterable
          :suffixIcon="() => '年'"
          class="w-[70px] mr-[10px]"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('YearList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="searchParam.month"
          placeholder="请选择"
          filterable
          clearable
          :suffixIcon="() => '月'"
          class="w-[50px] mr-[10px]"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('MonthList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="processId"
          placeholder="请选择工序"
          clearable
          size="small"
          style="width: 100px"
          :class="!panelSetIcon ? 'mr-[20px]' : ''"
        >
          <el-option
            v-for="(item, index) in currentProcess"
            :key="index"
            :label="item"
            :value="item"
            @click="handleProcess"
          />
        </el-select>
      </div>
    </div>
    <deviceManage-bar-one
      :id="`DeviceRepairPositionBar` + props.id"
      :key="`DeviceRepairPositionBar` + props.id"
      :title="` `"
      :params="locationStatistics ?? []"
      @handle-chart="handleChartDetail"
    />
    <!-- 钻取工单详情 -->
    <deviceManage-work-order ref="DeviceWorkOrderRef">
    </deviceManage-work-order>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url, title } = toRefs(props);

const DeviceWorkOrderRef = ref();
function handleChartDetail(params) {
  if (params.name) {
    DeviceWorkOrderRef.value.acceptParams({
      title: title.value,
      searchParam: {
        faultPosition: params.name,
        usingDepartmentName: processId.value,
        reportQueryStartTime: dayjs(
          `${searchedParam.year}-${searchedParam.month}`
        )
          .startOf("month")
          .format("YYYY-MM-DD HH:mm:ss"),
        reportQueryEndTime: dayjs(
          `${searchedParam.year}-${searchedParam.month}`
        )
          .endOf("month")
          .format("YYYY-MM-DD HH:mm:ss"),
      },
    });
  }
}

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const reportData = ref();

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
  // year: "2024",
  // month: "12",
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

function handleProcess() {
  // reportData.value = {
  //   ...reportData.value,
  //   yearOrderTrend1: null,
  // };
  // setTimeout(async () => {
  //   reportData.value.yearOrderTrend1 = mockData.yearOrderTrend1;
  // }, 20);
  const current =
    reportData.value.locationStatistics?.filter(
      (e) => e.name === processId.value
    )[0] ?? {};
  locationStatistics.value = [current];
}

async function handleSearch() {
  currentProcess.value = [];
  processId.value = null;
  reportData.value = null;
  locationStatistics.value = [];
  loading.value = true;
  Object.assign(searchedParam, searchParam);
  const { data } = await request({
    url: `/eam/equStatistics/queryEamRepairOrderList`,
    method: "post",
    data: {
      // workshopSectionCode: tabList.value[Number(activeTabs.value)].label,
      statisticsYear: searchParam.year,
      statisticsMoon: searchParam.month,
    },
  }).finally(() => {
    loading.value = false;
  });
  reportData.value = data;

  let list: any = [];
  data.locationStatistics?.map((e) => {
    list.push(e.name);
  });
  currentProcess.value = list;

  if (data.locationStatistics.length) {
    locationStatistics.value = [data.locationStatistics[0]];
    processId.value = data.locationStatistics[0].name;
  }
}
const currentProcess: any = ref([]);
const locationStatistics: any = ref([]);
const loading = ref(false);
const processId = ref();
const option = ref();
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
